
<template>
    <div class="main-view">
        <div class="flex all-c jus-b ml40">
            <div class="flex ali-c">
                <el-input
                    v-model="searchVal"
                    class="search-input"
                    placeholder="请输入要搜索的内容"
                ></el-input>
                <el-button
                    size="medium"
                    icon="el-icon-search"
                    class="btnfs18-theme ml25"
                >搜索</el-button>
            </div>
            <div class="flex ali-c" v-if="routeName=='collection'">
                <el-radio-group v-model="buyRadio" @change="changeRadio">
                    <el-radio :label="1">只看已购</el-radio>
                    <el-radio :label="0">尚未购买</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="tab-wrap">
            <h3 class="fs18 fs0">分类</h3>
            <ul class="tab-list flex ali-c ml35">
                <li
                    v-for="(item,index) in classList"
                    :key="index"
                    :class="{active:tabIndex==index}"
                    @click="changeTab(item,index)"
                >{{item.name}}</li>
            </ul>
            <el-button
                v-if="routeName=='history'"
                size="mini"
                class="btnfs16-theme"
            >一键清空</el-button>
        </div>
        <ul class="list-cont" v-if="dataList.length>0">
            <li
                v-for="(item,index) in dataList"
                :key="index"
            >
                <!-- <el-checkbox v-model="isChecked" class="cont-fl"></el-checkbox> -->
                <div class="cont-fr">
                    <div class="cont-top twoline">
                        <span class="cont-tag" v-if="labelStr(item).tagNO">{{labelStr(item).tagNO}}</span>
                        <span v-if="labelStr(item).tagEffect!='Y'&&labelStr(item).tagEffect!='R'">
                            <span 
                                v-if="labelStr(item).tagEffect"
                                class="cont-effect"
                                :class="{'no-yet':labelStr(item).tagEffect=='W'}"
                            >{{labelStr(item).tagEffectt=='W'?'尚未生效':'已失效'}}</span>
                        </span>
                        <span :class="{'pl7':labelStr(item).tagNO||(labelStr(item).tagEffect&&labelStr(item).tagEffect!='Y'&&labelStr(item).tagEffect!='R')}"></span>
                        <span class="cont-tit" :class="{'no-txt':labelStr(item).tagEffect=='N'}" @click="toPubDetails(item)">{{labelStr(item).name}}</span>
                    </div>
                    <div class="mt20">
                        <div class="fs14 c666 mb7" v-if="labelStr(item).address">{{labelStr(item).address}}</div>
                        <div class="fs14 c666 mb7" v-if="labelStr(item).number">{{labelStr(item).number}}</div>
                        <div class="fs14 c666 mb7" v-if="labelStr(item).author">{{labelStr(item).author}}</div>
                        <div class="fs14 c666 mb7" v-if="labelStr(item).source">{{labelStr(item).source}}</div>
                        <div class="fs14 c666 mb7" v-if="labelStr(item).orderId">{{labelStr(item).orderId}}</div>
                        <div class="mb7 mr15 flex ali-c jus-b">
                            <div class="fs14 c666" style="width:45%">{{labelStr(item).time}}</div>
                            <div class="fs14 c666" v-if="labelStr(item).collectTime">{{labelStr(item).collectTime|text}}</div>
                            <div class="fs14 c666" style="width:37%" v-if="labelStr(item).historyTime">{{labelStr(item).historyTime|text}}</div>
                            <div style="color:#E8C47B;" v-if="routeName=='collection'">
                                <i class="el-icon-star-on fs18 cp" @click="offCollect(item._id)"></i>
                            </div>
                        </div>
                    </div>
                    <div class="top-posi">
                        <div class="buy-btn" v-if="routeName=='collection'">{{buyRadio==1?'已购买':'未购买'}}</div>
                        <img src="@/static/images/delate.jpg" class="oper-icon" v-if="routeName=='note'||routeName=='history'" @click="onDelete(item._id)">
                        <img src="@/static/images/collect.jpg" class="oper-icon" v-if="routeName=='bookMark'" @click="onCancelMark(item)">
                    </div>
                    <div class="cont-posi" v-if="labelStr(item).payPrice">
                        <span>支付金额</span>
                        <span class="cont-price">{{labelStr(item).payPrice}}</span>
                        <span>元</span>
                    </div>
                </div>
            </li>
        </ul>
        <div v-else class="no-search-main">
            <div v-if="isSearchNull" class="tc">
                <img src="@/static/images/search_no.png" class="no-img" >
                <p class="mt15 fs16 c666">无搜索结果</p>
            </div>
            <div v-if="isNullData" class="mt20 fs14 c666">暂无数据</div> 
        </div>
        <!-- <el-pagination
            v-if="currentPage.total > currentPage.size&&currentPage.total != 0"
            class="mt25 tr"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            :current-page="currentPage.page"
            :page-size="currentPage.size"
            :total="currentPage.total"
            layout="sizes, prev, pager, next"
        >
        </el-pagination> -->
        
	</div>

</template>

<script>
export default {
	components: {
		
	},
    props:{
        dataList:{
            type:Array, 
            default:()=>[]
        },
        isSearchNull:{
            type:Boolean,
            default: false
        },
        isNullData:{
            type:Boolean,
            default: false
        },
        currentPage:{
            type:Object,
            default: {
                page: 1,
                size: 10,
                total: 0
            }
        }
    },
	computed: {
        classList(){
            return this.$store.getters.classList.slice(1);
        },
    },
	data() {
		return {
            searchVal:"",
            buyRadio:'all',
            tabIndex:0,
            currId:this.$store.getters.classList.slice(1)[0]._id,//默认当前第一个
            routeName:'',
        };
    },
    methods:{
        labelStr(item){
            let index = this.tabIndex+1;
            let currItem = {};
            let modelObj = {};
            if(item.book_info){
                currItem = item.book_info;
                modelObj.name = item.book_info.name;
            }else if(item.order_info){
                modelObj.name = item.order_info.goods_infos.name;
                modelObj.tagNO = item.order_info.goods_infos.components['案例编号'];
                modelObj.tagEffect = item.order_info.goods_infos.components['效力状态'];
                modelObj.time = '支付时间：'+item.pay_time;
                modelObj.orderId = '订单号：'+item.order_info.order_id;
                modelObj.payPrice = Number(item.pay_price);
                return modelObj;
            }else{
                currItem = item;
                modelObj.name = item.name;
            }
            switch (index) {
                case 1:
                    modelObj.tagNO = currItem.components['案例编号'];
                    modelObj.source = currItem.components['案例出处']?'案例出处：'+currItem.components['案例出处']:'';
                    modelObj.time = currItem.components['发布时间']?'发布时间：'+currItem.components['发布时间']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 2:
                    modelObj.tagEffect = currItem.components['效力状态'];
                    modelObj.number = currItem.components['发文字号']?'发文字号：'+currItem.components['发文字号']:'';
                    modelObj.time = currItem.components['发布日期']?'发布时间：'+currItem.components['发布日期']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 3:
                    modelObj.author = currItem.components['作者']?'作者：'+currItem.components['作者']:'';
                    modelObj.source = currItem.components['文献出处']?'文献出处：'+currItem.components['文献出处']:'';
                    modelObj.time = currItem.components['发表时间']?'发布时间：'+currItem.components['发表时间']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 4:
                    modelObj.address = currItem.components['审理法院']?'审理法院：'+currItem.components['审理法院']:'';
                    modelObj.number = currItem.components['案号']?'案号：'+currItem.components['案号']:'';
                    modelObj.source = currItem.components['裁判出处']?'裁判出处：'+currItem.components['裁判出处']:'';
                    modelObj.time = currItem.components['判决时间']?'裁判时间：'+currItem.components['判决时间']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 5:
                    modelObj.source = currItem.components['资源出处']?'资源出处：'+currItem.components['资源出处']:'';
                    modelObj.time = currItem.components['发表时间']?'发布时间：'+currItem.components['发表时间']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 6:
                    modelObj.time = currItem.components['出版日期']?'出版日期：'+currItem.components['出版日期']:'';
                    modelObj.number = currItem.components['卷册号']?'卷册号：'+currItem.components['卷册号']:'';
                    modelObj.author = currItem.components['作者']?'作者：'+currItem.components['作者']:'';
                    modelObj.collectTime = this.routeName=='collection'?'收藏时间：'+ currItem.update_time.split(" ")[0]:'';
                    modelObj.historyTime = this.routeName=='history'?'最后阅读时间：'+ currItem.update_time.date.split(" ")[0]:'';
                    break
                case 7:
                    break
                default:
                    break
            }
            return modelObj;
        },
        changeTab(item,index){
            this.tabIndex = index;
            let currIndex = 0;
            switch (index) {
                case 0:
                    currIndex = 1;
                    break;
                case 1:
                    currIndex = 2;
                    break;
                case 2:
                    currIndex = 3;
                    break;
                case 3:
                    currIndex = 4;
                    break;
                case 4:
                    currIndex = 7;
                    break;
                case 5:
                    currIndex = 6;
                    break;
                case 6:
                    currIndex = 8;
                    break;
                default:
                    break;
            }
            this.currId = item._id;
            this.$emit('changeTab',currIndex);
        },
        changeRadio(val){
            this.$emit('changeRadio',val);
        },
        onDelete(id){
            this.$emit('onDelete',id);
        },
        onCancelMark(item){
            this.$emit('onCancelMark',item);
        },
        offCollect(id){
            this.$emit('offCollect',id);
        },
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange',val);
        },
        handleSizeChange(val) {
            this.$emit('handleSizeChange',val);
        },
        toPubDetails(item){
            let productId = "";
            if(this.routeName=='record'){
                productId = item.order_info.goods_infos.product_id;
            }else{
                productId = item.product_id;
            }
            this.$router.push({path:'/pubDetails',query: {productId:productId}});
            // this.$emit('toPubDetails',item);
        }
    },
    created(){
        this.routeName = this.$route.name;
    },
	
};
</script>
<style lang="stylus" scoped>
.main-view
    width 100%
    padding 25px 0
    .search-input
        width 512px
        height 50px
        box-shadow 0 0 5px 1px rgba(193, 210, 255, 0.5)
        border-radius 4px
        border 1px solid #9EA6AF
        /deep/.el-input__inner
            font-size 16px
            border none
            outline none
            height 100%
            line-height 50px
    .tab-wrap
        display flex
        align-items center
        margin 25px 40px 0 40px
        width 922px
        height 56px
        padding 0 23px
        border-radius 4px
        border 1px solid #ddd
    .tab-list li
        font-size 16px
        color #4A4A4A
        margin-right 37px
        cursor pointer
        flex-shrink 0
        &.active,&:hover
            color #3266CC
            font-weight bolder
    .list-cont li
        padding 24px 40px 14px 40px
        position relative
        border-bottom 1px solid #ddd
        overflow hidden
        .cont-fl
            float left
            margin-top 8px
        .cont-fr
            float right
            width 100%
            position relative
            overflow hidden
            .cont-top
                width 770px
                overflow hidden
                line-height 30px
                font-weight bolder
                .cont-tag
                    font-size 16px
                    padding 5px 15px
                    border-radius 4px
                    background #F5E4B2
                .cont-effect
                    min-width 80px
                    padding 5px 8px
                    background #D6D6D6
                    color #fff
                    font-size 16px
                    border-radius 4px
                    &.no-yet
                        background #353539
                        color #FFD98B
            .cont-tit
                font-size 18px
                color #112C71
                cursor pointer
                transition all 0.2s
                &:hover
                    color #E8C47B
                &.no-txt
                    color #999
            .top-posi
                position absolute
                right 0
                top 3px
                z-index 9
                .buy-btn
                    width 81px
                    height 26px
                    line-height 26px
                    text-align center
                    border-radius 4px
                    background #98B2E5
                    font-size 14px
                    color #f8f8f8
                .oper-icon
                    display block
                    width 22px
                    height 24px
                    cursor pointer
            .cont-posi
                position absolute
                right 16px
                top 40px
                z-index 9
                font-size 18px 
                .cont-price
                    position relative
                    top 2px
                    padding-right 2px
                    padding-left 14px
                    color #F56060
                    font-size 28px
                    font-weight bolder
    .no-search-main
        width 100%
        display flex
        align-items center
        flex-direction column
        .no-img
            margin-top 112px
            width 300px
            height auto
</style>